<script setup>
import { Upload } from '@element-plus/icons-vue'

const props = defineProps({
    dialog: { type: Boolean, default: false },//是否是在dialog中显示
})
const emits = defineEmits(['status'])
const route = useRoute()
const router = useRouter()

const status = reactive({
    editData: !props.dialog && route.query.id,//是否编辑数据
    submitLoading: false,//提交按钮点击时的等待效果
})
const data = reactive({
    data: {
        fid: route.query.fid || 0//默认的上级id
    },
    type: [],//分类
})
const rules = reactive({
    name: [{ required: true, min: 2, max: 10, message: '类型名称必须在2~10个字符之间', trigger: 'blur' }],
})
const formRef = ref()

onMounted(() => {
    getData()
    getType()
})

//获取信息
const getData = () => {
    if (!status.editData) {//新增数据
        data.data = { fid: route.query.fid || 0 }
        return false
    }
    axios.get('/articleType/info', {
        params: { id: !props.dialog ? route.query.id : 0 }
    }).then(response => {
        data.data = response.data
    })
}
//获取类型
const getType = () => {
    axios.get('/auth/articleTypeList').then(response => {
        data.type = func.listToTree(response.data.list)
    })
}
//提交信息
const submit = (form) => {
    form.validate((valid, fields) => {
        if (!valid) return false
        status.submitLoading = true
        axios.post('/articleType/edit', {
            ...data.data
        }).then(response => {
            sys.tip(response)
            if (response.status == 1) {
                getData()
                getType()
                emits('status', { update: true })
            }
            setTimeout(() => { status.submitLoading = false }, 500)
        }).catch(error => {
            setTimeout(() => { status.submitLoading = false }, 500)
        })
    })
}
</script>

<template>
    <div>
        <Breadcrumb :title="['文章', '类型', status.editData ? '编辑' : '新增']" :path="['/article/list', '/articleType/list']"
            :back="route.query.back" v-if="!props.dialog" />
        <el-card :class="{ 'el-card-dialog': props.dialog }">
            <template #header v-if="!props.dialog">
                <span>基本信息</span>
            </template>
            <el-form class="edit" ref="formRef" :model="data.data" :rules="rules">
                <el-form-item label="上级类型">
                    <el-cascader :disabled="data.data.id ? true : false" v-model="data.data.fid" :options="data.type"
                        filterable clearable
                        :props="{ expandTrigger: 'hover', emitPath: false, checkStrictly: true, value: 'id', label: 'name', children: 'children' }"
                        placeholder="作为顶级类型" />
                </el-form-item>
                <el-form-item label="类型名称" prop="name">
                    <el-input v-model="data.data.name" clearable />
                </el-form-item>
                <el-form-item label="类型图片">
                    <ImageListUpload :list="data.data.image ? [{ url: data.data.image }] : []" :maxCount="1"
                        @change="(list) => { data.data.image = list[0] ? list[0].url : ''; }" />
                </el-form-item>
                <el-affix position="bottom" z-index="9">
                    <el-form-item label="&nbsp;" class="button-affix">
                        <el-button type="primary" :icon="Upload" v-if="$power('/articleType/edit')"
                            :loading="status.submitLoading" @click="submit(formRef)">提交</el-button>
                        <el-button v-if="status.editData" @click="getData()"
                            :disabled="status.submitLoading">刷新&重置</el-button>
                        <el-button :disabled="status.submitLoading" v-if="props.dialog" type="warning" plain
                            @click="emits('status', { close: true })">关闭</el-button>
                        <el-button :disabled="status.submitLoading" v-else type="warning" plain
                            @click="() => { router.push(route.query.back) }">返回</el-button>
                    </el-form-item>
                </el-affix>
            </el-form>
        </el-card>
    </div>
</template>

<style scoped lang="scss"></style>
